<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>内容：</h1>
    <h2>内容：</h2>
    <button class="button1">点击添加文本节点</button>
    <button class="button2">h2点击添加文本节点</button>
    <script>
        var h1 = document.querySelector("h1")
        var h2 = document.querySelector("h2")
        var btn1 = document.querySelector(".button1")
        var btn2 = document.querySelector(".button2")

        btn1.onclick = function () {
            //createTextNode方法可以创建一个文本节点
            var textNode = document.createTextNode("hello world")
            //appendChild方法可以将textNode节点添加到h1标签中。
            h1.appendChild(textNode)
        }


        //设置h1的文本节点，innerHTML的内容会完全覆盖原节点的内容
        btn2.onclick = function () {
            // h2.innerHTML = "hello h2"
            
            var str = h2.innerHTML;//获取文本内容
            h2.innerHTML = str + "hello world"; //原文本内容与新文本内容连接
        }
    </script>
</body>

</html>